<template>
    <div class="pay">
        <div class="code" @click="privilege">
            <h2>优惠码 >></h2>
            <p>曾参与内测的妈妈请输入优惠码</p>
        </div>
        <div class="wxpay" @click="jsApiCall">
            <h2>微信支付 >></h2>
            <p>仅8.8元</p>
        </div>
        <img class="logo" src="static/images/logo.png" alt="">
    </div>
</template>

<script>
    export default {
        name: 'pay',
        data () {
            return {
                an_id : 0,
            }
        },
        mounted () {
            this.an_id = sessionStorage.getItem("an_id")
        },
        components : {

        },
        methods : {
            jsApiCall (e) {
                var that = this
                var url = "http://assess.mumtalks.cn/index2.php?pay=1&openid=" + localStorage.getItem("openid")
                that.$http.get(url).then(e => {

                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest',
                        e.data,
                        function(res){
                            WeixinJSBridge.log(res.err_msg);
                            if( res.err_msg == "get_brand_wcpay_request:ok" ) {

                                //支付成功的话
                                var url = that._API_ + "pay?an_id=" + that.an_id

                                that.$http.get(url).then(e => {

                                    if( e.data == 1 )
                                    {
                                        location.href = "#Coding"
                                    }
                                    else
                                    {
                                        alert("出了故障，请通过微信支付单号去和管理员沟通")
                                    }
                                })

                            }
                            else
                            {

                            }
                        }
                    );

                })

            },
            callpay (e) {

                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                        document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
                    }
                }else{
                    this.jsApiCall();
                }

            },
            privilege (e) {
                location.href = "#Privilege"
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .code, .wxpay{
        width:630px;
        border: 2px dashed #f26f88;
        border-radius: 10px;
        padding:0px 30px 30px 30px;
        margin:0px auto;
        margin-top:50px;
    }
    .code{
        margin-top:95px;
    }
    h2{
        font-size:3.6rem;
        color:#f05c78;
        text-align: center;
        line-height:8rem;
        background:url("../../static/images/pay_border.png") no-repeat center 7rem;
    }
    p{
        font-size:2.6rem;
        color:#393939;
        text-align: center;
        line-height: 4rem;
    }
    .logo{
        position: fixed;
        left:269.5px;
        bottom:85px;
    }
</style>
